<template>
    <div class="action_contnet">
        <panle title='评论信息' content="评论信息列表"></panle>

    <!--筛选条件-->
    <div class="shaixuan2">
        <div class="daohang_content">
            <PersButton type="text" size="mini" icon="el-icon-goback" label="返回上一页" @click="goback"></PersButton>
        </div>
        <div style="margin-top: 15px;">
            <el-input placeholder="搜索关键词" v-model="input" class="input-with-select" style="width: 400px;">
                <el-select v-model="typeinput" slot="prepend" placeholder="请选择"  style="width: 130px;">
                    <el-option label="评论内容" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchtype"></el-button>
            </el-input>
            <el-select v-model="zhenshi_pingjia" placeholder="是否真实评价" @change="onlinechange" style="margin-left: 10px;">
                <el-option
                    v-for="item in zhenshi_pingjias"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="benchang_xinpinglun" placeholder="是否本场新评论" @change="dingyuechange" style="margin-left: 10px;">
                <el-option
                    v-for="item in benchang_xinpingluns"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 20px;"    @click="resetForm('searchinput')">重置</el-button>
            <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
        </div>
        <div class="first_table">
        
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column  align="center"  header-align="center" prop="wx_avatarurl" label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column header-align="center" align="center" prop="phone" label="手机号"></el-table-column>
                <el-table-column header-align="center" align="center" prop="yaoqingzhujiao" label="邀请助教"></el-table-column>
                <el-table-column header-align="center" align="center" prop="shenfen" label="身份"></el-table-column>
                <el-table-column header-align="center" align="center" prop="content" label="评论内容"></el-table-column>
                <el-table-column header-align="center" align="center" prop="zhenshipinglun" label="是否真实评论">
                    <template slot-scope="scope">
                        <span >
                        {{ scope.row.is_real_msg ? '是' : '否' }}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="benchang_zhenshi_pinglun" label="是否本场真实评论">
                    <template slot-scope="scope">
                        <span >
                        {{ scope.row.is_new_msg === 1 ? '是' : '否' }}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="send_time2" label="发送时间"></el-table-column>
                
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs"
            :type="0"></select-img>
    </div>
    </div>

    
</template>


<script>


    import Panle from '@/components/Panle';
    import { getpinglun } from '@/api/live/attendance';
    import PersButton from '@/components/PersButton';
    import SelectImg from '@/components/select-img';

    export default {
        components:{
            Panle,
            PersButton,
            SelectImg
        },
        props:{
            liveId:{
                type:String,
                default:''
            },
        },
        data(){
            return {
                formgroup:{
                    _id:'',
                    wx_avatarurl:'',
                    nickname:'',
                    content:'',
                    send_time:'',
                    liveId:this.$props.liveId,
                },
                rules: {
                    nickname: [{
                        required: true,
                        message: "昵称不能为空",
                        trigger: "blur"
                    }],
                    content: [{
                        required: true,
                        message: "内容不能为空",
                        trigger: "blur"
                    }],
                    msg_send_time: [{
                        required: true,
                        message: "发送时间不能为空",
                        trigger: "blur"
                    }],
                },
                opendialog:false,
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                input:'',
                tableData:[],
                loading: false,
                multipleSelectioncount: 0,
                benchang_xinpinglun:'',
                zhenshi_pingjia:'',
                typeinput:'2',
                zhenshi_pingjias: [
                    {
                    value: '',
                    label: '是否真实评论'
                    },{
                    value: '1',
                    label: '是'
                    }, {
                    value: '2',
                    label: '否'
                    }
                ],
                benchang_xinpingluns: [
                    {
                    value: '',
                    label: '是否本场新评论'
                    },{
                    value: '1',
                    label: '是'
                    }, {
                    value: '2',
                    label: '否'
                    }
                ],

                IsShowPicDig: false,
                imgnum: 1, //选择图片数量,
                isShowBgPicDiag: false,
                isShowVideoPicDiag: false,
            }
        },
        created(){

            this.init();
        },
        activated() {
            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.input = '';
                this.zhenshi_pingjia = '';
                this.benchang_xinpinglun = '';
                this.typeinput = '';
                this.init();
            },
            init(){
                let _param = {
                    liveId:this.$route.query.liveId,
                    live_user_id:this.$route.query.live_user_id,
                    input:this.input,
                    typeinput:this.typeinput,
                    user_id:this.user_id,
                    pageSize:this.pageSize,
                    zhenshi_pingjia:this.zhenshi_pingjia,
                    benchang_xinpinglun:this.benchang_xinpinglun,
                    pageNumber:this.pageNumber
                }
                getpinglun(_param).then((res) => {
                        if (res.code == 200) {

                            this.total = res.data.total;
                            this.tableData = res.data.list;
                        } else {
                            this.msgError(res.msg);
                        }
                    })
            },
            handleSizeChange: function (e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            searchtype(e){
                this.init();
            },
            onlinechange(e){
                this.init();
            },
            dingyuechange(e){
                this.init();
            },
            goback() {
            this.$router.go(-1);
            },
            //已选
            handleSelectionChange: function (e) {
                console.log(e);
                let selectChang = []
                for (let item of e) {
                    selectChang.push(item._id)

                }
                this.multipleSelection = selectChang;
                this.multipleSelectioncount = selectChang.length;
                console.log(selectChang);
            },
            edit:function(e){
                
                console.log(e);
                
                let editForm = {
                    _id:e._id,
                    wx_avatarurl:e.wx_avatarurl,
                    nickname:e.nickname,
                    content:e.content,
                    send_time:e.send_time,
                    liveId:this.$props.liveId
                }

                Object.assign(this.formgroup, editForm);
                this.opendialog = true;
                console.log(this.formgroup);
            },
            dianji_xiangqing_click:function(e){

            },
            xinzeng:function(e){
                this.formgroup={
                    _id:'',
                    wx_avatarurl:'',
                    nickname:'',
                    content:'',
                    send_time:'',
                    liveId:this.$props.liveId
                };
                this.opendialog = true;
            },
            cleanDiaglog: function (shows) {
                this.IsShowPicDig = false;
            },
            selectImgs: function (res) {

                console.log(res);
                this.IsShowPicDig = true;
                this.formgroup.wx_avatarurl = res[0].urls
            },
            openUploadDial: function () {

                this.IsShowPicDig = true;
            },
        }
        
    }

</script>


<style lang="scss" scoped>
@import "@/assets/css/common.scss";
.yixuan {
    margin: 20px;
    color: #787878;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 50px;
}


.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 230px;
}

.daorushuziren_btn2 {
    position: absolute;
    right: 0;
    margin-right: 140px;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;

    position: relative;

    overflow: hidden; */
    width: 100px;
    height: 100px;
}
.el-select .el-input {
    width: 136px;
}
.daohang_content {
    height: 30px;
    display: flex;
    align-content: center;
    padding-top: 0px;
}
</style>